<template>
	<view>
		<view style="width: 100%;text-align: center; padding-top: 30px;">
			<image src="../../static/icon.png" style="width: 150px; height: 150px;border-radius: 75px;border: #FFFFFF 2px solid;"></image>
		</view>
		
		<view class="adddiv">
		    <input v-model="name" class="uni-input addinput" type="text" placeholder="请输入用户名" />
		</view>
		
		<view class="adddiv2">
			<input v-model="password" class="uni-input addinput" password type="text" placeholder="请输入密码" />
		</view>
		<view class="adddiv3">
		    <button class="addbtn" type="primary" @click="login()" :disabled="log">登录</button>
		</view>
			<view class="adddiv6">
				<view class="addtext" @click="toindex()">先逛一逛</view>
				<view class="addtext1" @click='tozhuce()'>注册</view>
				<view class="addtext2">
					<checkbox-group class="block" @change="CheckboxChange">
						<checkbox style="transform:scale(0.6)" class='round blue' :class="checkbox[2].checked?'checked':''" :checked="checkbox[2].checked?true:false"
							 value="C">
						</checkbox>
						<span>记住密码</span>
					</checkbox-group>
				</view>
				<view class="addtext" @click="toforget()">忘记密码？</view>
			</view>
			<view style="height: 60px;text-align: center;margin-top:20px;">
				<view style="line-height: 1.8;">
					CDIO-1组&copy;版权所有
				</view>
				<view style="line-height: 1.8;">
					<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				password: '',
				rember: false,
				checkbox: [{
					value: 'A',
					checked: true
				}, {
					value: 'B',
					checked: true
				}, {
					value: 'C',
					checked: false
				}],
			}
		},
		onLoad() {
			
		},
		methods: {
			CheckboxChange(e) {
				if(e.detail.value[0] == "C") {
					this.rember = true
				}else{
					this.rember = false
				}
				var items = this.checkbox,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},
			toindex() {
				this.$router.push('/')
			},
			tozhuce(){
				uni.navigateTo({
					url: './components/zhuce',
				    success: res => {}
				});
			},
			toforget() {
				uni.navigateTo({
					url: './components/forget',
				    success: res => {}
				});
			},
			login() {
				let that = this
				uni.request({
				    url: 'http://101.37.15.60:8080/api/v1/login',
					method:'POST',
				    data: {
						id:'',
				        name: that.name,
						nickname: '',
						password: that.password,
						telephone:''
				    },
					header:{
						'Content-Type': 'application/json'
					},
				    success: (res) => {
						if(res.data.message == 'SUCCESS') {
							let data = res.data.data
							let token = data.token
							this.setCookie('Authorization',token,1)
							this.setCookie('id',data.userDetail.id,1)
							this.setCookie('name',data.userDetail.username,1)
							this.setCookie('password',data.userDetail.password,1)
							if(this.rember == true) {
								this.setCookie('rember',true,1)
							}
							this.tixing()
							setTimeout(function(){ that.toindex() }, 1000);
						}else{
							uni.showToast({
								icon: 'none',
							    title: '密码错误',
							    duration: 1000
							});
						}
				    }
				});
			},
			getCookies() {
			    if (document.cookie.length > 0) {
					var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
					for (var i = 0; i < arr.length; i++) {
						var arr2 = arr[i].split("="); //再次切割
						//判断查找相对应的值
						if(arr2[0] == "rember"){
							this.rember = arr2[1]
							if(this.rember == true) {
								if (arr2[0] == "name") {
									this.name = arr2[1]; //保存到保存数据的地方
								}else if(arr2[0] == "password") {
									this.password = arr2[1]
								}
							}
						}
					}
			    }
			},
			setCookie(c_name, c_pwd, exdays) {
			  var exdate = new Date(); //获取时间
			  exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
			  //字符串拼接cookie
			  window.document.cookie =
			    c_name + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
			},
			tixing() {
				uni.showToast({
				    title: '登陆成功',
				    duration: 1000
				});
			}
		},
		computed: {
			log() {
				if(!this.name || !this.password) {
					return true
				}else {
					return false
				}
			}
		}
	}
</script>

<style scoped>
	.addinput {
		width: 300px;
		height: 40px;
		border-radius: 15px;
		box-shadow: 1px 2px 2px #606266;
	}
	.adddiv {
		display: flex;
		justify-content: center;
		padding: 0 50px 0 50px;
		width: 100%;
		height: 65px;
		margin-top: 30px;
		text-align: center;
	}
	.adddiv2 {
		display: flex;
		justify-content: center;
		padding: 0 50px 0 50px;
		width: 100%;
		height: 65px;
		text-align: center;
	}
	.adddiv3 {
		display: flex;
		justify-content: center;
		padding: 0 50px 0 50px;
		width: 100%;
		text-align: center;
	}
	.addbtn {
		width: 200px;
		border-radius: 20px;
		background-color: #409EFF;
	}
	.adddiv4 {
		display: flex;
		justify-content: center;
	}
	.adddiv5 {
		display: flex;
		justify-content: center;
		padding-top: 25px;
	}
	.adddiv6 {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		padding: 25px 5px 0 5px;
		width: 100%;
	}
	.addtext {
		width: 25%;
		text-align: center;
		vertical-align: middle;
	}
	.addtext1 {
		width: 15%;
		text-align: center;
		vertical-align: middle;
	}
	.addtext2 {
		width: 35%;
		text-align: center;
		vertical-align: middle;
	}
</style>
